<template>
  <div class="keyboard-popup">
    <div class="mask" v-if="keyboardctl" @click="hideBoardCtl"></div>
    <div :class="['popup-main', keyboardctl ? 'show' : '']">
      <div class="popup-tit" v-if="keyboardconfig.isInput">{{ keyboardconfig.title }}</div>
      <ul class="myData-list" v-if="keyboardconfig.isInput">
        <li :class="['flex-box', 'keyboard-group', { 'active': keyboardconfig.first.isfocus }]">
          <div class="list-flex">
            <input type="password" :placeholder="keyboardconfig.first.holder"
                   :class="{ 'input-cur': keyboardconfig.first.isfocus }" :data-type="keyboardconfig.first.type"
                   :value="keyboardconfig.first.value"
                   @click="inputFocus"
                   data-index="0"
                   readonly>
          </div>
        </li>
        <li :class="['flex-box', 'keyboard-group', { 'active': keyboardconfig.second.isfocus }]">
          <div class="list-flex">
            <input type="text" :placeholder="keyboardconfig.second.holder"
                   :class="{ 'input-cur': keyboardconfig.second.isfocus }" :data-type="keyboardconfig.second.type"
                   :value="keyboardconfig.second.value"
                   @click="inputFocus"
                   data-index="1"
                   readonly>
          </div>
          <div class="yzm-img" v-if="keyboardconfig.isPickCode"><img :src="picCode" alt="" @click="getPicCode"></div>
        </li>
      </ul>
      <div class="keyboard">
        <div class="num-keyboard" v-if="keyBoardType == 'number'">
          <div class="l-con">
            <ul>
              <template v-for="(item, index) in randomNumber">
                <template v-if="item.type=='number'">
                  <li class="key-num" :data-val="item.value" @click="pushValue">{{ item.value }}</li>
                </template>
                <template v-if="item.type=='toabc'">
                  <li class="to-abc" @click="changeKeyBoard('abc')">{{ item.value }}</li>
                </template>
                <template v-if="item.type=='down'">
                  <li class="down-btn" @click="hideBoardCtl"><i></i></li>
                </template>
              </template>
            </ul>
          </div>
          <div class="r-con">
            <ul>
              <li class="clearValue" v-longtap="clearAll" @click="clearOne"><i class="l-clear-icon"></i></li>
              <li class="ok-btn" @click="commitFunc">查询</li>
            </ul>
          </div>
        </div>
        <div class="abc-keyboard" v-if="keyBoardType == 'abc'">
          <div class="keyboard-row row-1">
            <ul>
              <li v-for="item in enKeyBoard[0]">
                <span :data-val="item" @click="pushValue">{{ item }}</span>
              </li>
            </ul>
          </div>
          <div class="keyboard-row row-2">
            <ul>
              <li v-for="item in enKeyBoard[1]">
                <span :data-val="item" @click="pushValue">{{ item }}</span>
              </li>
            </ul>
          </div>
          <div class="flex-box">
            <div class="setCapsLock" @click="upCharater"><i :class="['capital-icon', upCase ? 'active' : '']"></i></div>
            <div class="flex-con keyboard-row row-3">
              <ul>
                <li v-for="item in enKeyBoard[2]" @click="pushValue">
                  <span :data-val="item">{{ item }}</span>
                </li>
              </ul>
            </div>
            <div class="clearValue" v-longtap="clearAll" @click="clearOne"><i class="clear-icon"></i></div>
          </div>
          <div class="flex-box">
            <div class="to-123" @click="changeKeyBoard('number')">123</div>
            <div class="flex-con ok-btn" @click="commitFunc">{{ keyboardconfig.btnText }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import common from '../../assets/js/common'

  export default {
    data () {
      return {
        keyBoardType: 'number',
        randomNumber: [],
        picCode: '',
        enKeyBoard: [
          ['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'],
          ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l'],
          ['z', 'x', 'c', 'v', 'b', 'n', 'm']
        ],
        upCase: false
      }
    },
    props: ['keyboardctl', 'keyboardconfig'],
    created: function () {
      var self = this
      self.getRandomNumber()
      self.getPicCode()
    },
    methods: {
      getRandomNumber: function () {
        var self = this
        var numlist = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
        var len = numlist.length
        var rand, result, i
        for (i = 0; i < len; i++) {
          rand = parseInt(Math.random() * len)
          result = numlist[rand]
          numlist[rand] = numlist[i]
          numlist[i] = result
        }
        var keyboradlist = []
        for (i = 0; i < numlist.length; i++) {
          keyboradlist[i] = {type: 'number', value: numlist[i]}
        }
        keyboradlist.splice(9, 0, {type: 'toabc', value: 'ABC'})
        keyboradlist.splice(11, 0, {type: 'down', value: ''})
        self.randomNumber = keyboradlist
      },
      getPicCode: function () {
        var imgUrl = common.getPicCode()
        var self = this
        self.picCode = imgUrl
      },
      clearAll: function () {
        var self = this
        self.$emit('clearall')
      },
      clearOne: function () {
        var self = this
        self.$emit('clearone')
      },
      inputFocus: function (e) {
        var self = this
        var keyBoardType = e.currentTarget.getAttribute('data-type')
        self.keyBoardType = keyBoardType
        self.$emit('inputchange', e)
      },
      changeKeyBoard: function (boardtype) {
        var self = this
        self.getRandomNumber()
        self.keyBoardType = boardtype
      },
      commitFunc: function () {
        var self = this
        self.$emit('commit')
      },
      upCharater: function () {
        var self = this
        var keyBoardCharacter = self.enKeyBoard
        keyBoardCharacter.forEach(function (e, i) {
          e.forEach(function (m, n) {
            if (self.upCase) {
              self.$set(self.enKeyBoard[i], n, m.toLowerCase())
            } else {
              self.$set(self.enKeyBoard[i], n, m.toUpperCase())
            }
          })
        })
        self.upCase = !self.upCase
      },
      hideBoardCtl: function () {
        var self = this
        self.$emit('hideboardctl')
        self.getRandomNumber()
      },
      pushValue: function (e) {
        var self = this
        var keyboardvalue = e.currentTarget.getAttribute('data-val')
        self.$emit('keyboardvalue', keyboardvalue)
      }
    }
  }
</script>

<style lang="scss">
  @import "../../assets/sass/keyboard/keyboard.scss";
</style>
